<template>
	<div class="income-chart-box">
		<div id="incomeChart"></div>
	</div>
</template>

<script setup>
import { ref, reactive } from "vue";
import echarts from "@/common/utils/echarts.js";
import { changeNumToWan } from "../../utils/handelScreen";
import httpApi from "@/api-dashboard/propertyApi.js";

let type = ref("0");

// 图例组件图
const mark1 = require("@/assets/screenImg/propertyImg/pointLine.png");
const mark2 = require("@/assets/screenImg/leaderImg/pointLine.png");
// 月份
let timeArr = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]);
//计划数据
let dataArr1 = ref(new Array(12).fill(0));
// 实际数据
let dataArr2 = ref(new Array(12).fill(0));
let pointData = ref([]);

let options = reactive({
	legend: {
		// 图例组件
		data: [
			{
				name: "计划收入",
				icon: `image://${mark1}`,
				textStyle: {
					color: "#D3E3FF",
				},
				itemStyle: {
					opacity: 1,
				},
				// lineStyle: {
				// 	type: "solid",
				// 	color: "#29F6F1",
				// 	width: 2,
				// },
			},
			{
				name: "实际收入",
				textStyle: {
					color: "#D3E3FF",
				},
				itemStyle: {
					opacity: 0,
				},
				lineStyle: {
					type: "solid",
					color: "#00C6FF",
					width: 2,
				},
			},
		],
	},
	tooltip: {
		trigger: "axis",
		axisPointer: {
			type: "none",
		},
		className: "tooltipBox",
		// position: ["0%", "20%"],
		backgroundColor: "transparent",
		textStyle: {
			color: "#ffffff",
		},
		padding: [5, 10, 10, 10],
		borderWidth: 0,
		formatter: (params) => {
			let res = `<span>${params[0].axisValueLabel}月</span>`;
			let value1 = params[0].value;
			let value2 = params[1].value;
			let diffValue = value1 - value2;
			if (diffValue > 0) {
				diffValue = "+" + diffValue;
			}
			for (let i = 0; i < params.length; i++) {
				res += `<br />
				<span>${params[i].seriesName}：</span>
				<span style="color:#FFDA3A">${params[i].value}万元</span>`;
			}
			res += `<br /><span>差额：</span><span style="color:#FFDA3A">${diffValue}万元</span>`;
			return res;
		},
	},
	grid: {
		right: "15%", //grid 组件离容器右侧的距离
		bottom: "7%",
	},
	xAxis: {
		type: "category",
		name: "单位（月）",
		data: timeArr.value,
		// 坐标轴名称
		nameTextStyle: {
			color: "#D3E3FF",
			padding: [0, 50, 0, 0],
		},
		//刻度
		axisTick: {
			show: false,
		},
		// 轴线
		axisLine: {
			show: false,
		},
		// 刻度标签
		axisLabel: {
			color: "#D3E3FF",
			interval: 0,
		},
	},
	yAxis: [
		{
			type: "value",
			name: "单位（万元）",
			axisLabel: {
				color: "#D3E3FF",
			},
			nameTextStyle: {
				color: "#D3E3FF",
			},
			// 分隔线
			splitLine: {
				lineStyle: {
					color: "#D3E3FF",
				},
			},
		},
	],
	series: [
		{
			name: "计划收入",
			data: dataArr1.value,
			type: "line",
			lineStyle: {
				// 设置线条颜色
				width: 0,
				color: "#00C6FF",
			},
			itemStyle: {
				// 设置线条上点的颜色
				color: "#00D3FD",
				opacity: 0,
			},
			// showSymbol: false,
			// emphasis: {
			// 	focus: "series",
			// },
			markPoint: {
				symbol: `image://${mark2}`,
				symbolKeepAspect: true,
				data: pointData,
				symbolSize: [10, 89],
				symbolOffset: [1, 38],
			},
		},
		{
			name: "实际收入",
			data: dataArr2.value,
			type: "line",
			lineStyle: {
				color: "#00C6FF", //折线的颜色
			},
			showSymbol: false,
			// symbol: "none", //取消标记图形
		},
	],
});
let incomeChart = null;
let initIncomeChartData = async () => {
	let res = await httpApi.assetOperate({
		sourceType: type.value,
	});
	let { httpStatusCode, data } = res;
	if (httpStatusCode === 200) {
		if (data.records.length) {
			data.records.forEach((el) => {
				dataArr1.value[el.moth - 1] = changeNumToWan(el.income_plan);
				dataArr2.value[el.moth - 1] = changeNumToWan(el.income);
			});
			pointData.value = dataArr1.value.map((obj, index) => {
				return {
					coord: [index, obj],
					// symbolSize: [20, item * 2],
					// symbolOffset: [0, item],
				};
			});
		} else {
			for (let i = 0; i < dataArr1.value.length; i++) {
				dataArr1.value[i] = 0;
			}
			for (let i = 0; i < dataArr2.value.length; i++) {
				dataArr2.value[i] = 0;
			}
			pointData.value = [];
		}
	}
	incomeChart.setOption(options);
};
const initIncomeChart = (sourceType) => {
	type.value = sourceType;
	// 初始化echarts实例
	if (incomeChart == null) {
		incomeChart = echarts.init(document.getElementById("incomeChart"));
	}
	initIncomeChartData();
};
defineExpose({
	initIncomeChart,
});
</script>
<style lang="scss" scoped>
.income-chart-box {
	width: 100%;
	height: 100%;
	#incomeChart {
		width: 100%;
		height: 100%;
	}
}
:deep(.tooltipBox) {
	background: url("@/assets/screenImg/propertyImg/tooltipBg.png") no-repeat;
	background-size: 100% 100%;
}
</style>
